<template>
  <!-- 头部 -->
  <div class="header">
    <span>新闻</span>
  </div>
  <!-- 新闻列表 -->
  <ul>
    <li
      v-for="item in arr"
      :key="item.id"
    >
      <img
        :src="item.urlImg"
      >
      <div>
        <span>
          {{ item.title }}
        </span>
        <span>{{ item.text }}</span>
      </div>
    </li>
  </ul>
</template>

<script setup>
import { newsInfo } from '@/api/public'
import { onMounted, ref } from 'vue'

// 定义数组
const arr = ref([])

// 请求数据
onMounted(async () => {
  const result = await newsInfo()
  if (result.code === 200) {
    arr.value = result.data
  }
})

</script>

<style lang="less" scoped>
.header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8B658B;
    span{
        font-size: 18px;
        font-weight: 600;
    }
}
ul{
  width: 100%;
  margin-bottom: 90px;
  li{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 15px;
    border-bottom: 1px solid gray;
    img{
      width: 120px;
    }
    div{
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-left: 10px;
      span{
        &:nth-child(1){
          font-size: 16px;
        }
        &:nth-child(2){
          color: gray;
        }
      }
    }
  }
}
</style>
